<template>
<div>
      <el-container class="containerr">
        
        <el-main>
         
            <div class="container clearfix">
                   <div class="mod-new-reg-text">
                <h3>用行动</h3>
                <p>游遍千山万水</p>
            </div>

                <div class="mod-new-reg-footer">
                        <span class="mod-new-reg-help">
                        <a class="mode-new-reg-help-text" >帮助中心</a>
                        <span class="mod-new-reg-line"></span>
                        <a class="mod-new-reg-service">
                           <i class="el-icon-headset"></i>
                        </a>
                        </span>
                        <span class="mod-new-reg-copyright">2021&nbsp;©&nbsp; Lv </span>
                        </div>



                <div class="roundbox loginrdbox clearfix">
                    <div class="loginbox">
                        <div class="top">
                             <img src="../assets/house/logo2.png" alt="" class="logo">
                            <h4>欢迎注册</h4>
                        </div>
                            
                            
                            
                            <div class="tabs">
                                    <div>
                                        <div>用户名：</div>
                                        <el-tooltip class="item" effect="dark" content="设置后不可更改，长度为3-8的英文或者数字" placement="top-start">
                                        <el-input 
                                            type="text"
                                            label="用户名"
                                            placeholder="请输入用户名"
                                            v-model="uname"
                                            @blur.native.capture="checkUname"
                                            :state="unameState"
                                           
                                            >
                                        </el-input>
                                    </el-tooltip>
                                    </div>

                                    <div>
                                         <div>设置密码：</div>
                                        <el-tooltip class="item" placement="top"  content="密码长度为0-6位的数字">
                                            <el-input 
                                            type="password"
                                            label="密码"
                                            v-model="upwd"
                                            :state="upwdState"
                                            @blur.native.capture="checkUpwd"
                                            placeholder="请输入密码">
                                         </el-input>
                                        </el-tooltip>
                                    </div>
                              

                                    <div>
                                         <div>密码：</div>
                                        <el-tooltip class="item" placement="top"  content="两次输入必须保持一致">        
                                            <el-input 
                                                    type="password"
                                                    label="重复密码"
                                                    v-model="repwd"
                                                    :state="repwdState"
                                                    @blur.native.capture="checkRepwd"
                                                    placeholder="请再次输入密码"></el-input>
                                        </el-tooltip> 
                                    </div>
                                    <button @click="checkForm" type="primary" size="large" class="btn">注册</button>
                                </div>
                          
                       
                    </div>
                </div>
		
                
	        </div>
        </el-main>
</el-container>
</div>

</template>
<script>
export default {
    data() {
    return {
      uname: '',
      unameState: '',
      upwd: '',
      upwdState: '',
      repwd: '',
      repwdState: ''
    }
  },
  methods: {

    checkUname(){
      // 验证用户名
      let uname = this.uname;
      let reg = /^\w{3,8}$/;
      if(reg.test(uname)){ //true  验证成功
        this.unameState='success';
        return true;
      }else{  //false  不符合格式要求
        this.unameState="error";
        return false;
      }
    },

    checkUpwd(){
     
      let reg = /^\d{6}$/;
      if(reg.test(this.upwd)){ //true  验证成功
        this.upwdState='success';
        return true;
      }else{  //false  不符合格式要求
        this.upwdState="error";
        return false;
      }
    },
    checkRepwd(){
      // 验证重复密码
      let reg = /^\d{6}$/;
      if( reg.test(this.repwd)  &&  (this.upwd == this.repwd)){ //true  验证成功
        this.repwdState='success';
        return true;
      }else{  //false  不符合格式要求
        this.repwdState="error";
        return false;
      }
    },
     checkForm(){
      if(this.checkUname() && this.checkUpwd() &&
        this.checkRepwd()){  // 所有组件验证成功
        // 发送注册请求，实现注册业务
        console.log(this.upwd);
        let url = '/register';
        let param = 
          `uname=${this.uname}&upwd=${this.upwd}`;
        this.axios.post(url, param).then(result=>{
            console.log(this.uname,this.upwd);
          console.log(result);
          if(result.data.code==200){ // 注册成功
            this.$message({
            message: '恭喜你，注册成功',
            type: 'success'
            })
            this.$router.push('/');
          }else { 
             this.$message.error( '用户已存在')
          }
        })

      }else{ // 其中有格式错误的组件

      }
    }
  }
}





 
</script>
<style scoped>
.containerr{
      background-image: url(../assets/house/pgg.jpg);
    width: 100%;
    height: 944px;
    margin: 0 auto; font-size: 12px;
    font-size: 12px;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}
.container, .inner-footer{
	margin:0 auto;
	width:960px;
}
.roundbox{
	position: relative;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#fff;
	box-shadow: 0 0 12px #3A8F5A;
}
.loginbox{
	position:absolute;
	top:300px;
	right:0px;
	padding:30px;
	width:300px;
	border:1px solid #ccc;
	border-radius:10px;
	background-color:#FFF;
	font-size:13px;
	font-family:"Microsoft yahei";
}

.loginbox .logo{
    width: 125px;
    margin-bottom: 30px;
    float: left;
}
.top h4 {
    font-size: 36px;
    color: #000;
    padding-bottom: 4px;
     float: left;
     margin: 50px 0 0 25px;
}
.tabs{
     float: left;
}
.item{
    margin: 15px 0;
    
    
}
.btn{
    background: #BDCEFC;
    border-radius: 25px;
    width: 300px;
    height: 50px;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background-color: #31c272;
    border: 0;
}
.container .mod-new-reg-text {
    position: fixed;
    left: 194px;
    top: 314px;
    color: #fff;
}
.container .mod-new-reg-text h3 {
    font-size: 54px;
    letter-spacing: 15;
    font-weight: 700;
}
.container .mod-new-reg-text p {
    font-size: 32px;
    letter-spacing: 20.81px;
    font-weight: 300;
    margin-top: 15px;
    }
 .container .mod-new-reg-footer{
     position: fixed;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
 }
  .container .mod-new-reg-footer .mod-new-reg-copyright {
   
    opacity: .54;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    padding-left: 30px;
}
.container .mod-new-reg-footer .mod-new-reg-help .mod-new-reg-line {
    display: inline-block;
    width: 2px;
    height: 12px;
   
    opacity: .78;
    margin: 0 12px 0 13px;
    background: #fff;
    position: relative;
    top: 1px;
  
}
</style>